<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <!--      搜索组件-->
      <div style="display: flex;align-items: center;">
        <SearchModle dataKey="applyMange" @searchFn="searchFn" ref="searchModleFn"></SearchModle>
        <div class="ml-10"></div>
        <div class="mb-10">
          <downexcel type="bookBorrow" :option="{user_name:(searchForm.user_name || ''),status:radioStatus,start_time:(searchForm.start_time || ''),end_time:(searchForm.end_time || '')}"></downexcel>
        </div>
      </div>
      <!--      end-->
      <div class="tab-body">
        <div class="tab-box">
          <el-radio-group v-model="radioStatus" size="small" @change="changeFn()">
            <el-radio-button :label="0">申请中({{ tabNumer[0] }})</el-radio-button>
            <el-radio-button :label="1">待还书({{ tabNumer[1] }})</el-radio-button>
            <el-radio-button :label="2">已还书({{ tabNumer[2] }})</el-radio-button>
            <el-radio-button :label="3">驳回({{ tabNumer[3] }})</el-radio-button>
          </el-radio-group>
        </div>
        <div class="tab-box-list">
          <el-button size="small" type="primary" plain v-if="radioStatus==0" @click="getBookBackFn">一键批量借出</el-button>
          <el-button size="small" type="warning" plain v-if="radioStatus==0" @click="rejectBookBackFn">一键批量驳回
          </el-button>
          <el-button size="small" type="primary" plain v-if="radioStatus==1" @click="rejectBookFn">一键批量还书
          </el-button>
        </div>
      </div>
      <borrowing v-if="radioStatus==0" ref="backBookChange" @getNewNumber="getNewNumber"
                 :searchForm="searchForm"></borrowing>
      <returnted v-if="radioStatus==1" ref="returntedChange" @getNewNumber="getNewNumber"
                 :searchForm="searchForm"></returnted>
      <returntedEnd v-if="radioStatus==2" :searchForm="searchForm" @getNewNumber="getNewNumber"></returntedEnd>
      <reject v-if="radioStatus==3" :searchForm="searchForm" @getNewNumber="getNewNumber"></reject>
    </div>
  </div>
</template>

<script>
import borrowing from "./borrowManage/borrowing";
import returnted from "./borrowManage/returnted";
import returntedEnd from "./borrowManage/returntedEnd";
import reject from "./borrowManage/reject";

export default {
  components: {
    borrowing,
    returnted,
    returntedEnd,
    reject
  },
  data() {
    return {
      radioStatus: 0,
      tabNumer: [],
      // 搜索组件
      searchForm: {}
    }
  },
  created() {

  },
  methods: {
    searchFn(option) {
      this.searchForm = JSON.parse(JSON.stringify(option))
      if(this.searchForm.start_time){
        let start_timeArr = this.searchForm.start_time
        this.searchForm.start_time = start_timeArr[0]
        this.searchForm.end_time = start_timeArr[1]
      }
      console.log( this.searchForm,'123op')
    },
    changeFn() {
      this.searchForm = JSON.parse(JSON.stringify(this.searchForm))

      // this.searchForm = {};
      // this.$refs.searchModleFn.refreshFn();
    },
    // 跟新数量
    getNewNumber(option) {
      this.tabNumer = JSON.parse(JSON.stringify(option))
      console.log(this.tabNumer,'-----------------tabNumer')
    },
    // 一键批量还书
    rejectBookFn() {
      this.$refs.returntedChange.BatchOperation();
    },
    // 一键借出申请
    getBookBackFn() {
      this.$refs.backBookChange.BatchOperation()
    },
    // 一键驳回申请
    rejectBookBackFn() {
      this.$refs.backBookChange.BatchOperationBook()
    }
  },
  mounted() {
    this.$refs.backBookChange.detailBox();
  }
}
</script>
<style>
.tab-body {
  display: flex;
  align-items: center;
}

.tab-box {
  flex: 1;
}
</style>
